import { CommonDrawer, createPageTemplateConfig, PageTemplate } from '@/components';
import useIntlCustom from '@/hooks/useIntlCustom';
import { FC, memo } from 'react';
import { getPageConfig } from '../pageConfig';

interface UserDetailDrawerProps {
  open: boolean;
  onClose: () => void;
  roleData: {
    roleId: string;
    roleName: string;
  } | null;
}

const UserDetailDrawer: FC<UserDetailDrawerProps> = ({ open, onClose, roleData }) => {
  const { translate } = useIntlCustom();
  const t = (key: string, params?: Record<string, any>) => translate('systemManage', key, params);
  const pageConfig = getPageConfig(translate);

  // 使用 pageConfig 中的 userConfig 配置创建模板配置
  const userTemplateConfig = createPageTemplateConfig<any>()
    .setPageConfig({
      isShowBreadcrumb: false,
    })
    .setSearchConfig({
      fields: pageConfig.userConfig.searchFields,
    })
    .setTableConfig({
      columns: pageConfig.userConfig.columns,
      rowKey: 'userId',
      props: {
        scroll: { x: 1200 },
        size: 'small',
      },
    })
    .setActionConfig({
      permissions: {
        create: false,
        update: false,
        delete: false,
        view: false,
      },
    })
    .setCrudConfig(pageConfig.userConfig.apiConfig)
    .build();

  const title = roleData ? t('roleUserList', { roleName: roleData.roleName }) : t('userList');

  return (
    <CommonDrawer visible={open} title={title} onClose={onClose} width={1200} destroyOnHidden showDefaultFooter={false}>
      <div style={{ height: '100%', overflow: 'auto' }}>
        <PageTemplate<any> {...userTemplateConfig} />
      </div>
    </CommonDrawer>
  );
};

export default memo(UserDetailDrawer);
